<script setup lang="ts">
import { computed, onMounted, reactive, ref, shallowRef } from 'vue'

import { ColumnHeightOutlined, ReloadOutlined } from '@ant-design/icons-vue'
import type { MenuProps, PaginationProps, TableProps } from 'ant-design-vue'
import { useAppStore } from '~/stores/app'
import { useLayoutMenu } from '~/stores/layout-menu'
import { useLayoutMenuProvide } from '~/components/page-container/context'
import { type LogFormState, getLogListApi } from '~/api/log/log'

const layoutMenu = useLayoutMenu()
const appStore = useAppStore()
useLayoutMenuProvide(layoutMenu, appStore)

const message = useMessage()
const columns = shallowRef([
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '操作类型',
    dataIndex: 'operation',
  },
  {
    title: '请求方法',
    dataIndex: 'method',
  },
  {
    title: '请求参数',
    dataIndex: 'params',
    ellipsis: true,
    width: 200,
    slots: {
      customRender: 'params',
    },
  },
  {
    title: 'ip',
    dataIndex: 'ip',
  },
])
const loading = shallowRef(false)
const total = ref(0)
const pagination = reactive<PaginationProps>({
  pageSize: 10,
  pageSizeOptions: ['10', '20', '30', '40'],
  current: 1,
  total: total.value,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: total => `总数据位：${total}`,
  onChange(current, pageSize) {
    pagination.pageSize = pageSize
    pagination.current = current
    init()
  },
})
const dataSource = shallowRef<LogFormState[]>([])

const tableSize = ref<string[]>(['large'])
const sizeItems = ref<MenuProps['items']>([
  {
    key: 'large',
    label: '默认',
    title: '默认',
  },
  {
    key: 'middle',
    label: '中等',
    title: '中等',
  },
  {
    key: 'small',
    label: '紧凑',
    title: '紧凑',
  },
])

const options = computed(() => {
  return columns.value.map((item) => {
    return {
      label: item.title,
      value: item.dataIndex,
    }
  })
})
const getCheckList = computed(() => columns.value.map(item => item.dataIndex))

async function init() {
  if (loading.value)
    return
  loading.value = true
  try {
    const { data } = await getLogListApi(pagination.current, pagination.pageSize)
    // 假设API返回的数据格式与角色列表类似
    dataSource.value = data.list ?? []
    total.value = data.total ?? 0
  }
  catch (e) {
    console.log(e)
    message.error('获取日志列表失败')
  }
  finally {
    loading.value = false
  }
}

async function onSearch() {
  pagination.current = 1
  await init()
}

/**
 * 密度切换
 */
const handleSizeChange: MenuProps['onClick'] = (e) => {
  tableSize.value[0] = e.key as string
}

/**
 * 过滤
 */
function filterAction(value: string[]) {
  return columns.value.filter((item) => {
    if (value.includes(item.dataIndex)) {
      return true
    }
    return false
  })
}

// 备份columns
const filterColumns = ref(filterAction(getCheckList.value))

onMounted(() => {
  init()
})
</script>

<template>
  <page-container>
    <a-card title="日志查询">
      <template #extra>
        <a-space size="middle">
          <a-tooltip title="刷新">
            <ReloadOutlined @click="onSearch" />
          </a-tooltip>
          <a-tooltip title="密度">
            <a-dropdown trigger="click">
              <ColumnHeightOutlined />
              <template #overlay>
                <a-menu v-model:selected-keys="tableSize" :items="sizeItems" @click="handleSizeChange" />
              </template>
            </a-dropdown>
          </a-tooltip>
        </a-space>
      </template>
      <a-table
        :loading="loading"
        :columns="filterColumns"
        :data-source="dataSource"
        :pagination="pagination"
        :size="tableSize[0] as TableProps['size']"
        row-key="id"
      >
        <template #bodyCell="scope">
          <template v-if="scope?.column?.dataIndex === 'params'">
            <a-tooltip :title="scope?.record?.params">
              <span>{{ scope?.record?.params }}</span>
            </a-tooltip>
          </template>
        </template>
      </a-table>
    </a-card>
  </page-container>
</template>
